<template>
    <div class="login-page">
      <!-- 顶部Logo区域 -->
      <div class="logo-group">
        <div class="logo-icon">¥</div>
        <div class="logo-text">鲨鱼记账</div>
      </div>
  
      <!-- 底部操作区域 -->
      <div class="bottom-group">
        <!-- 登录按钮区域 -->
        <van-button
          round
          block
          color="#FFD814"
          text-color="#333"
          class="user-login-btn"
          :disabled="!agreeProtocol"
          @click="goLogin"
        >
          用户登录
        </van-button>
        
        <!-- 协议勾选区域 -->
        <div class="agreement-group">
          <van-checkbox 
            v-model="agreeProtocol" 
            shape="round" 
            size="16"
            checked-color="#FFD814"
          />
          <span class="agreement-text">已阅读并同意《用户协议》和《隐私协议》</span>
        </div>
        
        <!-- 更多登录方式区域 -->
        <div class="more-login" @click="showBottom = true">更多登录方式</div>
      </div>
  
      <!-- 底部圆角弹窗 -->
      <van-popup
        v-model:show="showBottom"
        round
        position="bottom"
        :style="{ height: '30%' }"
      >
        <div class="popup-content">
          <div class="popup-item" @click="goRegister">注册</div>
          <div class="popup-item" @click="goMobileLogin">手机登录</div>
          <div class="popup-item cancel" @click="showBottom = false">取消</div>
        </div>
      </van-popup>
    </div>
  </template>
  
  <script setup>
  import { ref } from 'vue';
  import { useRouter } from 'vue-router';
  import { Button, Checkbox, Popup } from 'vant';

  const router = useRouter();
  const agreeProtocol = ref(false); // 协议默认不勾选
  const showBottom = ref(false); // 弹窗显示状态

  // 跳转到用户登录页
  const goLogin = () => {
    if (!agreeProtocol.value) {
      showToast('请先同意用户协议和隐私协议');
      return;
    }
    router.push({ name: 'login' });
  };

  // 跳转到注册页
  const goRegister = () => {
    if (!agreeProtocol.value) {
      showToast('请先同意用户协议和隐私协议');
      showBottom.value = false;
      return;
    }
    showBottom.value = false;
    router.push({ name: 'register' });
  };

  // 跳转到手机登录页
  const goMobileLogin = () => {
    if (!agreeProtocol.value) {
      showToast('请先同意用户协议和隐私协议');
      showBottom.value = false;
      return;
    }
    showBottom.value = false;
    router.push({ name: 'mobileLogin' });
  };
  </script>
  
  <style scoped>
.login-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  min-height: 100vh;
  padding: 25% 16px 40px;
  box-sizing: border-box;
  background: linear-gradient(135deg, #fff 0%, #f7f8fa 100%);
}

.logo-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 0;
  animation: fadeInDown 0.8s ease-out;
}

.logo-icon {
  width: 90px;
  height: 90px;
  background: linear-gradient(135deg, #FFD814 0%, #FFCC00 100%);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  font-weight: bold;
  color: #333;
  margin-bottom: 16px;
  box-shadow: 0 4px 12px rgba(255, 204, 0, 0.3);
}

.logo-text {
  font-size: 28px;
  font-weight: 500;
  color: #333;
  letter-spacing: 2px;
}

.bottom-group {
  width: 100%;
  animation: fadeInUp 0.8s ease-out;
}

.user-login-btn {
  width: 100%;
  margin-bottom: 20px;
  height: 48px;
  font-size: 16px;
  font-weight: 500;
  box-shadow: 0 4px 12px rgba(255, 204, 0, 0.3);
  transition: all 0.3s;
}

.user-login-btn:active {
  transform: scale(0.98);
}

.user-login-btn:disabled {
  opacity: 0.5;
  box-shadow: none;
}

.agreement-group {
  display: flex;
  align-items: center;
  font-size: 12px;
  color: #999;
  margin-bottom: 24px;
  padding: 0 4px;
}

.agreement-text {
  margin-left: 8px;
  line-height: 1.5;
}

.more-login {
  color: #666;
  font-size: 14px;
  text-align: center;
  cursor: pointer;
  transition: color 0.3s;
}

.more-login:active {
  color: #333;
}

.popup-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: space-around;
  padding: 16px;
}

.popup-item {
  text-align: center;
  padding: 16px;
  border-radius: 12px;
  background-color: #f7f7f7;
  font-size: 16px;
  transition: background-color 0.3s;
  cursor: pointer;
}

.popup-item:active {
  background-color: #e8e8e8;
}

.popup-item.cancel {
  background-color: #fff;
  color: #999;
  border: 1px solid #e8e8e8;
}

/* 动画 */
@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
  </style>